<!--
 * @Author: 贺楚 2402041262@qq.com
 * @Date: 2023-01-12 09:59:27
 * @LastEditors: 贺楚 2402041262@qq.com
 * @LastEditTime: 2023-01-14 16:44:03
 * @FilePath: \vue-admin-template-master\src\views\present\presentlist\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getGiftList"></el-button>
    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="getGiftList"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button>
    <!-- 表格 
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column prop="id" label="id" align="center" width="100">
      </el-table-column>
      <el-table-column prop="fromUser" label="送礼者" align="center">
      </el-table-column>
      <el-table-column prop="toUser" label="收礼者" align="center">
      </el-table-column>
      <el-table-column prop="giftName" label="礼物名称" align="center">
      </el-table-column>
      <el-table-column prop="sendTime" label="创建时间" align="center" width="200">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name:'PresentList',
  data(){
    return{
      //页码
      pageNumber: 1,
      //每页数量
      pageSize: 10,
      //总条数
      total: 0,
      //列表数据
      list: [],
      searchText:''
    }
  },
  mounted() {
    this.getGiftList()
  },
  methods:{
    async getGiftList() {
      let res = await this.$API.present.getGiftList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        searchText:this.searchText
      })
      this.total = res.data.sumLine;
      this.list = res.data.rows;
    },
    reSetting(){
      this.searchText = '';
      this.getGiftList();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
    }
  }
}
</script>

<style>
  
</style>